<template>
  <view class="container">
    <!-- 顶部用户信息 -->
    <view class="user-card">
      <view class="user-info">
        <cloud-image width="150rpx" height="150rpx" v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"></cloud-image>
        
        <view v-else class="avatar">
        	<image src="/static/logo.png" mode="widthFix" style="width: 45px;"></image>
        </view>
        <view class="user-details">
          <text class="username">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</text>
          <text class="user-level">等级：{{ currentUser.level }}</text>
        </view>
      </view>
      <view class="stats">
        <view class="stat-item">
          <text class="stat-value">{{ subordinates.length }}</text>
          <text class="stat-label">下级成员</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ currentUser.customerCount || 0 }}</text>
          <text class="stat-label">团队客户</text>
        </view>
      </view>
    </view>

    <!-- 上级关系 -->
    <view class="relation-section">
      <view class="section-header">
        <text class="section-title">我的上级</text>
      </view>
      <view class="superior-card" v-if="superior">
        <image class="avatar" :src="superior.avatar || '/static/avator.png'" mode="aspectFill"></image>
        <view class="user-details">
          <text class="username">{{ superior.nickname || superior.username || superior.mobile }}</text>
          <text class="user-level">等级：{{ superior.level || '未设置' }}</text>
        </view>
        <view class="relation-tag">上级</view>
      </view>
      <view class="empty-state" v-else>
        <text class="empty-text">暂无上级</text>
      </view>
    </view>

    <!-- 下级关系 -->
    <view class="relation-section">
      <view class="section-header">
        <text class="section-title">我的下级</text>
      <!--  <view class="add-btn" @click="showAddSubordinate = true">
          <text class="add-text">添加下级</text>
          <text class="icon-add">+</text>
        </view> -->
      </view>
      
      <view v-if="subordinates.length > 0">
        <view class="subordinate-list">
          <view 
            class="subordinate-item" 
            v-for="sub in subordinates" 
            :key="sub.id"
            @click="viewSubordinateDetail(sub)"
          >
            <image class="avatar" :src="sub.avatar || '/static/avator.png'" mode="aspectFill"></image>
            <view class="user-details">
              <text class="username">{{ sub.nickname }}</text>
              <text class="user-level">等级：{{ sub.level || '未设置' }}</text>
              <text class="join-time">加入时间：{{ sub.register_date || '未知' }}</text>
            </view>
            <view class="sub-stats">
              <text class="sub-count">{{ sub.subCount || 0 }}位下级</text>
            </view>
          </view>
        </view>
      </view>
      <view class="empty-state" v-else>
        <image class="empty-icon" src="/static/images/empty-team.png"></image>
        <text class="empty-text">暂无下级成员</text>
        <text class="empty-tip">点击上方按钮添加下级成员</text>
      </view>
    </view>

    <!-- 添加下级弹窗 -->
    <uni-popup ref="addPopup" type="bottom" :mask-click="false">
      <view class="add-subordinate-popup">
        <view class="popup-header">
          <text class="popup-title">添加下级成员</text>
          <view class="popup-close" @click="closeAddPopup">
            <text class="icon-close">×</text>
          </view>
        </view>
        
        <view class="popup-content">
          <view class="form-item">
            <text class="form-label">姓名</text>
            <input 
              class="form-input" 
              v-model="newSubordinate.name" 
              placeholder="请输入成员姓名"
              type="text"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">手机号</text>
            <input 
              class="form-input" 
              v-model="newSubordinate.phone" 
              placeholder="请输入手机号"
              type="number"
              maxlength="11"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">等级</text>
            <picker 
              class="form-picker" 
              mode="selector" 
              :range="levelOptions" 
              :value="levelIndex"
              @change="onLevelChange"
            >
              <view class="picker-text">{{ levelOptions[levelIndex] }}</view>
            </picker>
          </view>
          
          <button class="submit-btn" @click="addSubordinate" :disabled="!canSubmit">
            <text class="submit-text">确认添加</text>
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
	const db = uniCloud.database();
	const Obj=uniCloud.importObject('mydb-page')
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
export default {
  data() {
    return {
      currentUser: {
        id: 1,
        name: '',
        level: '',
        avatar: '',
        customerCount: 0
      },
      superior: {
        id: 0,
        name: '',
        level: '',
        avatar: ''
      },
      subordinates: [],
      showAddSubordinate: false,
      newSubordinate: {
        name: '',
        phone: '',
        level: 'VIP1'
      },
      levelOptions: ['VIP1', 'VIP2', 'VIP3', 'VIP4'],
      levelIndex: 0
    }
  },
  computed: {
  	userInfo() {
  		return store.userInfo
  	},
  	hasLogin(){
  		return store.hasLogin
  	},
  	appConfig() {
  		return getApp().globalData.config
  	},
    canSubmit() {
      return this.newSubordinate.name.trim() && 
             this.newSubordinate.phone.trim() && 
             this.newSubordinate.phone.length === 11
    }
  },
  mounted() {
    this.getMyOrganize()
  },
  methods: {
    async getMyOrganize() {
      const res = await Obj.getMyOrganize()
      if(res.status){
        this.subordinates = res.data.subordinates
        this.superior = res.data.superior
      }
    },
    viewSubordinateDetail(subordinate) {
      uni.navigateTo({
        url: `/pages/subordinate-detail/subordinate-detail?id=${subordinate.id}`
      })
    },
    onLevelChange(e) {
      this.levelIndex = e.detail.value
      this.newSubordinate.level = this.levelOptions[this.levelIndex]
    },
    addSubordinate() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      // 模拟添加下级成员
      const newMember = {
        id: Date.now(),
        name: this.newSubordinate.name,
        level: this.newSubordinate.level,
        avatar: '/static/images/avatar-default.png',
        joinTime: this.formatDate(new Date()),
        subCount: 0
      }
      
      this.subordinates.push(newMember)
      this.currentUser.teamSize += 1
      
      uni.showToast({
        title: '添加成功',
        icon: 'success'
      })
      
      this.closeAddPopup()
      this.resetForm()
    },
    closeAddPopup() {
      this.$refs.addPopup.close()
    },
    resetForm() {
      this.newSubordinate = {
        name: '',
        phone: '',
        level: 'VIP1'
      }
      this.levelIndex = 0
    },
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.user-card {
  background: linear-gradient(135deg, #4a90e2, #5aa0f0);
  border-radius: 16rpx;
  padding: 30rpx;
  color: white;
  margin-bottom: 30rpx;
  
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .user-details {
      display: flex;
      flex-direction: column;
      
      .username {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
      }
      
      .user-level {
        font-size: 24rpx;
        opacity: 0.9;
      }
    }
  }
  
  .stats {
    display: flex;
    justify-content: space-around;
    
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .stat-value {
        font-size: 40rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .stat-label {
        font-size: 24rpx;
        opacity: 0.9;
      }
    }
  }
}

.relation-section {
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .add-btn {
      display: flex;
      align-items: center;
      background-color: #4a90e2;
      padding: 12rpx 24rpx;
      border-radius: 50rpx;
      
      .add-text {
        font-size: 24rpx;
        color: white;
        margin-right: 10rpx;
      }
      
      .icon-add {
        color: white;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }
}

.superior-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  
  .user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .username {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .user-level {
      font-size: 22rpx;
      color: #666;
    }
  }
  
  .relation-tag {
    background-color: #e6f7ff;
    color: #1890ff;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 22rpx;
  }
}

.subordinate-list {
  .subordinate-item {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .user-details {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .username {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .user-level {
        font-size: 22rpx;
        color: #666;
        margin-bottom: 4rpx;
      }
      
      .join-time {
        font-size: 20rpx;
        color: #999;
      }
    }
    
    .sub-stats {
      .sub-count {
        font-size: 22rpx;
        color: #666;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
  
  .empty-icon {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 30rpx;
    opacity: 0.5;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 16rpx;
  }
  
  .empty-tip {
    font-size: 24rpx;
    color: #ccc;
  }
}

.add-subordinate-popup {
  background-color: white;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding-bottom: 40rpx;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .popup-close {
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .icon-close {
        font-size: 40rpx;
        color: #999;
      }
    }
  }
  
  .popup-content {
    padding: 30rpx;
    
    .form-item {
      margin-bottom: 40rpx;
      
      .form-label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
      }
      
      .form-input {
        border: 1rpx solid #e0e0e0;
        border-radius: 8rpx;
        padding: 20rpx;
        font-size: 28rpx;
      }
      
      .form-picker {
        border: 1rpx solid #e0e0e0;
        border-radius: 8rpx;
        padding: 20rpx;
        
        .picker-text {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
    
    .submit-btn {
      background-color: #4a90e2;
      color: white;
      border-radius: 50rpx;
      padding: 24rpx;
      margin-top: 20rpx;
      
      &:disabled {
        background-color: #ccc;
      }
      
      .submit-text {
        font-size: 32rpx;
      }
    }
  }
}
</style>